<template>
  <div>
    <div style="width:95%;height:200px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
      <div style="width:20%;height:200px;float: left;top: 30px;position: relative;left: 50px;">
        <el-image style="width: 100px; height: 100px"
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.huishi365.com%2Fupload%2Fimage%2F20151221%2F1450662089121005.jpg&refer=http%3A%2F%2Fwww.huishi365.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649994997&t=33555ac9ab3b4beb8befa6d00be912be"
          :fit="fit">
        </el-image>
      </div>

      <div style="float: left;width: 75%;top: 30px;position: relative;">
        <div class="demo-input-size">


          <el-form :model="searchObj">
            <el-row>
              <el-col :span="12">
                <el-row>
                  <el-form-item label="学员名字" :label-width="formLabelWidth">
                    <el-input placeholder="请输入学员名字" size="small" v-model="searchObj.name" style="width: 200px;"
                      clearable @clear="nameClear" />

                  </el-form-item>
                </el-row>
              </el-col>
              <el-col :span="12">
                <el-row>
                  <el-form-item label="用户职位" :label-width="formLabelWidth">
                    <template>

                      <el-select v-model="roleName" placeholder="请选择" @change="roleChange()" @clear="roleClear"
                        clearable>
                        <el-option v-for="(item,index) in roles" :key="index" :value="item.role">
                        </el-option>
                      </el-select>
                    </template>
                  </el-form-item>
                </el-row>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-row>
                  <el-form-item label="用户部门" :label-width="formLabelWidth">
                    <template>
                      <el-select v-model="departmentNames" placeholder="请选择部门" @clear="departmentClear"
                        @change="departmentChange" clearable>
                        <el-option v-for="(item,index) in departmentList" :key="index" :value="item.departmentName">
                        </el-option>
                      </el-select>
                    </template>
                  </el-form-item>
                </el-row>
              </el-col>

              <el-col :span="8" :offset="4">
                <el-row>
                  <el-button type="primary" @click="search">确 定</el-button>
                </el-row>
              </el-col>

            </el-row>
          </el-form>


        </div>
      </div>

    </div>
    <br>
    <br>
    <br>

    <div>
      <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click='closeDialog("edit")'>
        <el-form label-width="80px" ref="editForm" :model="editForm">
          <el-form-item label="用户名" prop="account">
            <el-input size="small" v-model="editForm.account" auto-complete="off" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="用户密码" prop="password">
            <el-input size="small" v-model="editForm.password" auto-complete="off" placeholder="请输入用户密码"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input size="small" v-model="editForm.name" auto-complete="off" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="角色" prop="roleId">
            <el-select size="small" v-model="editForm.roleId" placeholder="请选择" class="userRole">
              <el-option label="经理" value="1"></el-option>
              <el-option label="普通成员" value="2"></el-option>
              <el-option label="管理员" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门" prop="departmentId">
            <el-select size="small" v-model="editForm.departmentId" placeholder="请选择" class="userRole">
              <el-option label="人事部" value="1"></el-option>
              <el-option label="清理部" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input size="small" v-model="editForm.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="邮件" prop="email">
            <el-input size="small" v-model="editForm.email" placeholder="请输入邮箱地址"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="userSex">
            <el-radio v-model="editForm.userSex" label="男">男</el-radio>
            <el-radio v-model="editForm.userSex" label="女">女</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click='closeDialog("edit")'>取消</el-button>
          <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存
          </el-button>
        </div>
      </el-dialog>
    </div>


    <el-button type="success" round @click="addUser">添加用户</el-button>
    <!--信息展示 -->
    <div style="height: 900px;width: 100%;">
      <el-table :data="userTrainCourseMsgList" border style="width: 100%">
        <el-table-column prop="name" label="姓名" fixed width="180">
        </el-table-column>
        <el-table-column prop="departmentName" label="部门" sortable width="180">
        </el-table-column>
        <el-table-column prop="role" label="职位" sortable width="100">
        </el-table-column>
        <el-table-column prop="joinTrainNum" sortable label="参与的培训" width="120">
        </el-table-column>
        <el-table-column prop="joinCourseNum" label="参与的课程" width="100">
        </el-table-column>
        <el-table-column prop="runTrainNum" label="进行中培训" width="100">
        </el-table-column>
        <el-table-column prop="runCourseNum" label="进行中课程" width="100">
        </el-table-column>
        <el-table-column prop="courseTimeNum" label="学习总时长" width="100">
        </el-table-column>

        <!-- 修改删除用户 -->
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <!-- <el-button circle type="danger" icon="el-icon-check"> 修改用户信息</el-button> -->
            <el-button type="primary" size="mini" icon="el-icon-edit">
            </el-button>

            <el-button type="primary" size="mini" icon="el-icon-share" @click="showUser(scope.row.id)"></el-button>

          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <Pagination v-bind:child-msg="pageparm" @callFather="callFather">
      </Pagination>

      </el-tab-pane>

    </div>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import userApi from '@/api/user'
  import departmentApi from '@/api/department'
  import roleApi from '@/api/role'
  import trainApi from '@/api/train'
  export default {
    data() {
      return {
        trainId: 1,
        train: {},
        isok: true,
        // 分页参数
        pageparm: {
          currentPage: 1,
          pageSize: 10,
          total: 10,
        },

        father_Change: 0,
        father_test: 0,
        account: '',
        formLabelWidth: '180px',
        inputObj: {
          width: '200px'
        },
        fit: 'fill',
        departmentList: [], //部门对象
        departmentNames: '',
        searchObj: {
          name: ''
        }, //查询对象
        roles: [], //角色数组
        roleName: '',
        userTrainCourseMsgList: [], //用户课程 培训 
        listtest: [], //用户课程 培训 
        name: '',
        editFormVisible: false, //控制编辑页面显示与隐藏
        // 编辑与添加
        editForm: {
          id: '',
          account: '',
          password: '',
          phone: '',
          email: '',
          status: '',
          departmentId: '',
          managerId: '',
          roleId: '',
          name: '',
          token: localStorage.getItem('logintoken')
        },
        // 部门参数
        unitparm: {
          userIds: '',
          deptId: '',
          deptName: ''
        },
        title: '', //添加或修改用户信息
        loading: false,
        // 请求数据参数
        formInline: {
          page: 1,
          limit: 10,
        }
      }

    },

    // 注册组件
    components: {
      Pagination,
    },

    created() {
      this.findAllDepartment();
      this.getAllRole()
      this.getUserAllMsg()
    },


    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
      getdata(parameter) {
        this.loading = true
        /***
         * 调用接口，注释上面模拟数据 取消下面注释
         */
        this.pageparm.currentPage = this.formInline.page
        this.pageparm.pageSize = this.formInline.limit
        // 获取培训列表
        this.getUserAllMsg()
      },
      // 分页插件事件
      callFather(parm) {
        this.formInline.page = parm.currentPage
        this.formInline.limit = parm.pageSize

        this.getdata(this.formInline)
      },

      //获得所有部门信息
      findAllDepartment() {
        departmentApi
          .findAllDepartment()
          .then((response) => {
            console.log('所有部门', response)
            this.departmentList = response.data
          })
          .catch()
      },
      //获得当前选择的部门
      departmentChange(department) {
        // console.log(department)
        for (const key in this.departmentList) {
          // console.log(this.departmentList[key].departmentName)
          if (this.departmentList[key].departmentName == department) {
            this.searchObj.departmentName = this.departmentList[key].departmentName
            console.log(this.searchObj.departmentName)
          }
        }
      },
      //获得当前选择的角色
      roleChange(role) {
        // console.log(role);
        for (const key in this.roles) {
          console.log(this.roles[key].role);
          if (this.roles[key].role == this.roleName) {
            this.searchObj.roleId = this.roles[key].id
            console.log(this.searchObj.roleId)
          }
        }
      },
      //获取所有角色
      getAllRole() {
        roleApi
          .findAllRole()
          .then((response) => {
            this.roles = response.data
            console.log('所有角色', this.roles)
          })
          .catch()
      },
      //查询所有学员的培训情况
      getUserAllMsg() {
        trainApi.getUserAllMsg(this.pageparm.currentPage, this.pageparm.pageSize, this.searchObj).then(response => {
          console.log("学员信息", response);
          this.userTrainCourseMsgList = response.data.list
          this.pageparm.total = response.data.total
          console.log(this.userTrainCourseMsgList);
        })
      },
      //搜索方法
      search() {
        console.log(this.searchObj);
        this.getUserAllMsg()
      },
      fit() {},
      roleClear(id) {

        this.searchObj.roleId = ''
      },
      departmentClear() {
        this.searchObj.departmentName = ''
      },
      nameClear() {
        this.searchObj.name = ''
      },

      //显示编辑界面
      addUser: function () {
        this.editFormVisible = true
        this.title = '添加用户'
        this.editForm.id = ''
        this.editForm.account = ''
        this.editForm.password = ''
        this.editForm.phone = ''
        this.editForm.email = ''
        this.editForm.departmentId = ''
        this.editForm.roleId = ''
        this.editForm.name = ''
        // this.editForm.userSex = ''
      },

      // 编辑、添加提交方法
      submitForm() {
        // this.$refs[editData].validdate(valid => {
        if (this.editForm.id == '') {
          // 请求方法
          this.$axios.post('/api/user/addOneUser', this.editForm)
            .then(res => {
              console.log(res);
              this.editFormVisible = true
              this.loading = false
              if (res.data.code == 200) {
                this.$message({
                  type: 'success',
                  message: '添加保存成功！'
                })
                this.editFormVisible = false
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            }).catch()


        } else {
          return false
        }
        // })
      },

      //显示跳转到用户信息
      showUser(id) {

        this.$router.push({
          path: '/userTrain/userTrainMessage/',
          query: {
            "userid": id
          }
        })
      },
      //关闭模态框
      closeDialog() {
        this.editFormVisible = false
      }
    },
  }

</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }

  .userRole {
    width: 100%;
  }

  .my-label {
    background: #e1f3d8;
  }

  .my-content {
    background: #fde2e2;
  }

  .input_float {
    float: left;
  }

</style>
